<template>
	<view>
	    <div class="shop_main_top">
			<img :src='shop.img' class="shop_img" />
			<div class="icon_box" @click="goType()">
				<svg t="1731311823533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2340" 
				width="20" height="20"><path d="M617.38 873.7L289.61 545.94c-18.72-18.72-18.72-49.16 0-67.88L617.38 150.3c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L346.17 512l316.45 316.45c12.5 12.5 12.5 32.75 0 45.25-6.25 6.25-14.44 9.38-22.62 9.38s-16.38-3.13-22.62-9.38zM334.55 523.31h0.31-0.31z" fill="#333333" p-id="2341"></path></svg>
			</div>
			<div class="shop_price">
				<span class="big">￥{{(shop.price*shop.discount).toFixed(2)}}</span>
				<span class="white">限购{{shop.limited}}份</span><br>
				<span class="span_three">￥{{shop.price}}</span>
				<span class="context_span"></span>
				<span class="span_three">已卖{{shop.sell}}份</span>
			</div>
			<div class="shop_name">
				<p>{{shop.name}}</p>
			</div>
		</div>
		<div class="shop_two">
			<div class="div_one">
				<div>1
					<span>无忧保障</span>
					<span class="yellow">平台保障 7天物流有保障 闪电退款</span>
				</div>
				<svg t="1731382153205" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1490" 
				width="16" height="16"><path d="M341.957209 959.354678c-12.893658 0-25.842575-4.425799-36.386722-13.467733-23.493064-20.10592-26.224268-55.426357-6.064113-78.891791L603.929736 511.789199l-304.423361-355.206978c-20.160155-23.465434-17.427928-58.786894 6.064113-78.891791 23.437805-20.024056 58.786894-17.373693 78.837556 6.064113l335.675132 391.620305c17.974373 20.952194 17.974373 51.875484 0 72.827679l-335.675132 391.620305C373.371686 952.717514 357.691565 959.354678 341.957209 959.354678z" p-id="1491" fill="#d1cece"></path></svg>
			</div>
			<div class="div_one">
				<div>
					<span>提货信息</span>
					<span class="yellow_left">现在下单 明日16:00可提货</span>
				</div>
			</div>
			<div class="div_one">
				<span class="span_one">菜鸟驿站万达广场店</span>
			</div>
			<div class="div_one">
				<div class>
					<span class="red">热卖榜</span>
					<span class="span_2">热选 [热卖榜] 第15名</span>
				</div>
				<svg t="1731382153205" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1490"
				width="16" height="16"><path d="M341.957209 959.354678c-12.893658 0-25.842575-4.425799-36.386722-13.467733-23.493064-20.10592-26.224268-55.426357-6.064113-78.891791L603.929736 511.789199l-304.423361-355.206978c-20.160155-23.465434-17.427928-58.786894 6.064113-78.891791 23.437805-20.024056 58.786894-17.373693 78.837556 6.064113l335.675132 391.620305c17.974373 20.952194 17.974373 51.875484 0 72.827679l-335.675132 391.620305C373.371686 952.717514 357.691565 959.354678 341.957209 959.354678z" p-id="1491" fill="#d1cece"></path></svg>
			</div>
		</div>
		<div class="div_three">
			<h4>规格信息</h4>
			<div class="main_all">
				<div>
					<span class="main_one">商品编号</span>
					<span class="main_two">{{shop.shopid}}</span>
				</div>
			</div>
			<div class="main_all">
				<span class="main_one">品牌</span>
				<span class="main_two">{{shop.brand}}</span>
			</div>
			<div class="main_all">
				<span class="main_one">规格</span>
				<span class="main_two">{{shop.specification}}</span>
			</div>
			<div class="main_all">
				<span class="main_one">生产日期</span>
				<span class="main_two">{{shop.Production}}</span>
			</div>
			<div class="main_all">
				<span class="main_one">保质期</span>
				<span class="main_two">{{shop.shelflife}}</span>
			</div>
			<div class="main_all">
				<span class="main_one">存储方式</span>
				<span class="main_two">{{shop.storagemode}}</span>
			</div>
		</div>
		<div class="color_one"></div>
		<div class="div_three">
			<h4>商品详情</h4>
			<!-- {{
				shop.detailsimg[0].map(item=>{
					return <img :src="item" />
				})
			}} -->
			<img :src="img1" class="img_main" />
			<img :src="img2" class="img_main" />
		</div>
		<div class="goShop">
			<div class="shop_one" @click="goindex">
				<svg t="1731410024651" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7214" id="mx_n_1731410024652" 
				width="28" height="28"><path d="M49.617455 515.304727a34.909091 34.909091 0 0 1-23.645091-60.625454L488.378182 29.626182a34.978909 34.978909 0 0 1 47.336727 0.069818L995.444364 454.749091a34.909091 34.909091 0 1 1-47.406546 51.269818L511.930182 102.795636 73.239273 506.088727a34.769455 34.769455 0 0 1-23.621818 9.216z" fill="#333333" p-id="7215"></path><path d="M827.275636 1001.844364H196.724364c-44.916364 0-81.454545-36.538182-81.454546-81.454546V541.858909a34.909091 34.909091 0 1 1 69.818182 0v378.530909a11.636364 11.636364 0 0 0 11.636364 11.636364h630.551272c6.4 0 11.636364-5.236364 11.636364-11.636364V541.858909a34.909091 34.909091 0 1 1 69.818182 0v378.530909c0 44.916364-36.538182 81.454545-81.454546 81.454546z" fill="#333333" p-id="7216"></path><path d="M597.178182 1001.844364h-170.379637c-44.916364 0-81.454545-36.538182-81.454545-81.454546v-237.149091c0-44.916364 36.538182-81.454545 81.454545-81.454545h170.379637c44.916364 0 81.454545 36.538182 81.454545 81.454545v237.125818a81.547636 81.547636 0 0 1-81.454545 81.477819z m-170.379637-330.24a11.636364 11.636364 0 0 0-11.636363 11.636363v237.125818a11.636364 11.636364 0 0 0 11.636363 11.636364h170.379637c6.4 0 11.636364-5.236364 11.636363-11.636364V683.240727c0-6.4-5.236364-11.636364-11.636363-11.636363h-170.379637z" fill="#333333" p-id="7217"></path></svg>
				<p>首页</p>
			</div>
			<div class="shop_one" @click="goshopping">
				<svg t="1731410063893" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8323" 
				width="28" height="28"><path d="M246.4 912a2.1 2.1 0 1 0 134.4 0 2.1 2.1 0 1 0-134.4 0Z" p-id="8324"></path><path d="M716.8 912a2.1 2.1 0 1 0 134.4 0 2.1 2.1 0 1 0-134.4 0Z" p-id="8325"></path><path d="M905.6 764.8l-537.6 0c-28.8 0-57.6-25.6-64-54.4l-96-566.4c-9.6-54.4-60.8-96-115.2-96l-22.4 0c-12.8 0-25.6 12.8-25.6 25.6 0 12.8 12.8 25.6 25.6 25.6l22.4 0c28.8 0 57.6 25.6 64 54.4l96 566.4c9.6 54.4 60.8 96 115.2 96l537.6 0c12.8 0 25.6-12.8 25.6-25.6C931.2 777.6 921.6 764.8 905.6 764.8z" p-id="8326"></path><path d="M880 179.2l-572.8 0c-12.8 0-25.6 12.8-25.6 25.6 0 12.8 12.8 25.6 25.6 25.6l572.8 0c25.6 0 38.4 16 32 41.6l-70.4 281.6c-6.4 32-41.6 57.6-73.6 60.8l-396.8 28.8c-12.8 0-25.6 12.8-22.4 28.8 0 12.8 12.8 25.6 28.8 22.4l396.8-28.8c54.4-3.2 105.6-48 118.4-99.2l70.4-281.6C976 230.4 937.6 179.2 880 179.2z" p-id="8327"></path></svg>
				<p>购物车</p>
			</div>
			<div>
				<span class="span_left">加入购物车</span>
				<span class="span_right">立即购买</span>
			</div>
		</div>
		<div class="box_bottom">
			
		</div>
		<div>
			<view class="content" v-for="i in list.slice(0, rexiaohaohuo_num)" :key="i.id">
				<view class="one">
					<div class="img_src">
						<img :src="i.img" alt="" style="width: 100%; height: 100%;" />
					</div>
					<div class="shop_con">
						<div class="" style="width: 90%; color: gray; ">
							{{i.name}}
						</div>
						<div>
							<button
								style="background-color: aliceblue; color:#d81e06; display: inline-block; border-radius: 100rpx; height: 40rpx; line-height: 40rpx; margin: 10rpx 0;">好货上心</button>

						</div>
						<div>
							<button
								style="background-color: #d81e06; color:aliceblue; display: inline-block; border-radius: 15rpx; height: 40rpx; line-height: 40rpx;">已省{{parseFloat(i.price-(i.price*i.discount)).toFixed(2)}}元</button>
						</div>
						<div style="display: flex; justify-content: space-between; width: 95%;">
							<div>
								<span style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx;">$25</span>
								<span
									style="color: gray; font-size: 35rpx; text-decoration: line-through;">$15</span>
							</div>
							<div>
								<wd-button type="error" size="small">加入购物车</wd-button>
							</div>
						</div>
					</div>
				</view>
			</view>
			<wd-loadmore :state="rexiaohaohuo_state" @reload="loadmore" />
		</div>
	</view>
</template>

<script lang="ts" setup>
	import {useNowShopStore} from '@/store/now_shop'
	const {shop} = useNowShopStore()
	
	console.log(shop.detailsimg[0])
	let imgs = shop.detailsimg[0]
	// let imgs = shop.detailsimg.split('/')
	console.log(imgs.split('"')[3])
	let img1 = imgs.split('"')[1]
	let img2 = imgs.split('"')[3]
	function goType(){
		uni.navigateBack({
    delta: 1
  })
	}
	const goindex=()=>{
    // console.log('跳转');
    uni.switchTab({
        url:'/pages/IndexPages/index/index'
    })
}
	import {useMainStore} from '@/store/index';
	const userinfo = useMainStore()
	import {storeToRefs} from 'pinia'
	const {list} = storeToRefs(userinfo)
	// console.log(list)
	const rexiaohaohuo_state=ref<string>('loading')
	const rexiaohaohuo_num=ref<number>(2)
	const rexiaohaohuo_max=ref<number>(list.value.length)
		onReachBottom(() => {
  if (rexiaohaohuo_num.value === rexiaohaohuo_max.value) {
    rexiaohaohuo_state.value = 'error'
  } else if (rexiaohaohuo_num.value < rexiaohaohuo_max.value) {
    loadmore()
  } else if (rexiaohaohuo_num.value >= rexiaohaohuo_max.value) {
    rexiaohaohuo_state.value = 'finished'
  }
})
const goshopping=()=>{
    // console.log('跳转');
    uni.switchTab({
        url:'/pages/ShoppingPages/shopping/shopping'
    })
}

onLoad(() => {
  loadmore()
})
function loadmore() {
  setInterval(() => {
    rexiaohaohuo_num.value = rexiaohaohuo_num.value + 2
    rexiaohaohuo_state.value = 'loading'
	if(rexiaohaohuo_num.value >= rexiaohaohuo_max.value){
		rexiaohaohuo_state.value = 'finished'
	}
  }, 2000)
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 300rpx;
	margin: 0 auto;
	background-color: #f0f0f0;

	.one {
		width: 95%;
		height: 300rpx;
		margin: 0 auto;
		background-color: white;
		display: flex;
		justify-content: space-around;

		.img_src {
			width: 30%;
			height: 90%;

			margin: auto;
		}

		.shop_con {
			width: 65%;
			height: 90%;
			margin: auto;

		}
	}
}
	// 商品详情图片
.shop_img{
	height: 47vh;
}
.icon_box{//返回按钮
	background-color: #797979 !important;
	width: 40rpx;
	height: 40rpx;
	padding: 5px;
	border-radius: 50%;
	position: absolute;
	top: 50rpx;
	left: 50rpx;
}
.shop_price{//商品价格
	width:100%;
	background-color: #666666;
	position: relative;
	top: -10px;
	color: white;
	padding: 10px;
	.big{
		font-size: 40rpx;
	}
	.white{
		display: inline-block;
		padding: 7px 10px;
		background-color: #ffffff;
		color: red;
		border-radius: 20px 20px 20px 0px ;
		width: 20vw;
		text-align: center;
		margin-left: 20px;
	}
	.span_three{
		color: #8d9ea1;
	}
	.context_span{
		display: inline-block;
		width: 80rpx;
	}
	
}
.shop_name{
	padding: 10rpx;
	
}
.shop_two{
	padding: 20rpx 0rpx;
	background-color: #f7f7f7;
	.div_one{
		display: flex;
		align-items: center;
		padding: 20rpx;
		justify-content: space-between;
		background-color: #ffffff;
		.yellow{
				color: #b97c1f;
				margin-left: 20rpx;
			}
		.yellow_left{
			margin-left: 20rpx;
		}
		.span_one{
			color: #837e92;
			font-size: 30rpx;
			margin-left: 140rpx;
		}
		.red{
			background-color: #ff1400;
			color: #ffffff;
			font-size: 25rpx;
			padding: 5px 10px;
			border-radius: 50rpx 0% 0 50rpx;
		}
		.span_2{
			color: #c89392;
			padding: 5px 10px;
			background-color: #fef1ee;
		}
	}
}
.div_three{
	padding: 10px ;
	h4{
		margin-bottom: 50rpx;
	}
	.main_all{
		width: 100%;
		.main_one{
			display: inline-block;
			width: 20%;
			background-color: #f2f2f2;
			padding: 10rpx;
		}
		.main_two{
			width: 70%;
			display: inline-block;
			background-color: #f7f7f7;
			padding: 10rpx;
		}
	}
}
.color_one{
	width: 100vw;
	background-color: #f7f7f7;
	height: 30rpx;
}
.img_main{
	width: 100%;
}
.goShop{
	z-index: 999;
	width: 100vw;
	height: 10vh;
	background-color: white;
	position: fixed;
	bottom: 0px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	.shop_one{
		text-align: center;
		
	}
	.span_left{
		background-color: #ff5d03;
		padding: 20rpx 25rpx;
		color: white;
		border-radius: 50px 0 0 50px;
	}
	.span_right{
		background-color: #ff1800;
		padding: 20rpx 25rpx;
		color: white;
		border-radius: 0px 50px 50px 0px;
	}
}
.box_bottom{
	width: 10vh;
}
</style>
